<template>
  <d2-container>
    <div class="flex-1 renovation-box d-f" style="height: 100%;">
      <div class="layout-left">
        <div class="flex-1 row-a-j-fc mt-3">
          <div class="module-left row-a-j-fc cp" @click="addModule('HeadTerm')">
            <div class="iconfont icon-dingbujinzhi"></div>
            <div class="mt font-s-1">头部</div>
          </div>
          <div class="module-left row-a-j-fc cp" @click="addModule('RotationShow')">
            <div class="iconfont icon-lunbotu"></div>
            <div class="mt font-s-1">轮播图</div>
          </div>
          <div class="module-left row-a-j-fc cp" @click="addModule('NavigationShow')">
            <div class="iconfont icon-daohangliebiao"></div>
            <div class="mt font-s-1">导航</div>
          </div>
          <div class="module-left row-a-j-fc cp" @click="addModule('PictureShow')">
            <div class="iconfont icon-tupian"></div>
            <div class="mt font-s-1">图片</div>
          </div>
          <div class="module-left row-a-j-fc cp" @click="addModule('GoodsShow')">
            <div class="iconfont icon-shangpin"></div>
            <div class="mt font-s-1">商品</div>
          </div>
          <div class="module-left row-a-j-fc cp" @click="addModule('NewsShow')">
            <div class="iconfont icon-wenzhang"></div>
            <div class="mt font-s-1">文章</div>
          </div>
        </div>
      </div>
      <div class="layout-middle flex-1 ">
        <div class="flex-1 row" style="height: 100%;">
          <div class="mobile-template">
            <div class="flex-1 bg-white">
              <div class="flex-1 row-ac-sb mx-2 mt">
                <div style="font-size: 8px;">中国移动</div>
                <div class="row-ac">
                  <div class="iconfont icon-phone-signal-full" style="font-size: 6px;"></div>
                  <div class="iconfont icon-xinhao ml" style="font-size: 6px;"></div>
                  <div class="iconfont icon-dianliang ml" style="font-size: 6px;"></div>
                </div>
              </div>
            </div>
            <div class="flex-1">
              <div v-for="item in moduleList" :key="item.id">
                <bc-head v-if="item.types === 'HeadTerm'" :headId="item.id" />
                <div class="flex-1 mx-2" v-if="item.types === 'GoodsShow'">
                  <bc-goods :goodsId="item.id" />
                </div>
                <div class="flex-1 mx-2" v-if="item.types === 'NavigationShow'">
                  <bc-navigation :navigationId="item.id" />
                </div>
                <div class="flex-1 mx-2" v-if="item.types === 'NewsShow'">
                  <bc-news :newsId="item.id" />
                </div>
                <div class="flex-1 mx-2" v-if="item.types === 'PictureShow'">
                  <bc-picture :pictureId="item.id" />
                </div>
                <div class="flex-1 mx-2" v-if="item.types === 'RotationShow'">
                  <bc-rotation :rotationId="item.id" />
                </div>
              </div>
            </div>
          </div>
          <div class="assembly-box">
            <div class="assembly-item row-ac cp" v-for="(item, index) in moduleList" :key="item.id"
              @click="tapApplication(item)">
              <div class="iconfont icon-shanchu ml-1 text-light-grey" @click.stop="toDelete(item.id)"></div>
              <div class="font-s-2 ml-1">{{ item.types | typesFilter }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="layout-right">
        <div class="flex-1 mx-3 mt-3">
          <div class="flex-1 mt-2 p-2 bg-white" v-if="moduleList.length !== 0">
            <div class="font-s-2 font-w">组件设置</div>
            <div class="mt-2" v-if="moduleTypes == 'HeadTerm'">
              <div class="title-box">头部样式</div>
              <div class="mt-2 ml-6">
                <el-radio-group v-model="application.head_show">
                  <el-radio class="mb-2" :label="0">默认样式</el-radio>
                  <el-radio class="mb-2" :label="1">样式一</el-radio>
                  <el-radio class="mb-2" :label="2">样式二</el-radio>
                  <el-radio class="mb-2" :label="3">样式三</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="mt-2" v-if="moduleTypes == 'PictureShow'">
              <div class="mt-2">
                <div class="title-box">展示样式</div>
                <div class="mt-2 ml-6">
                  <el-radio-group v-model="application.image_show">
                    <el-radio class="mb-2" :label="0">默认样式</el-radio>
                    <el-radio class="mb-2" :label="1">样式一</el-radio>
                    <el-radio class="mb-2" :label="2">样式二</el-radio>
                    <el-radio class="mb-2" :label="3">样式三</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="mt-2">
                <div class="title-box">上传图片</div>
                <div class="mt-2 ml-6">
                  <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :on-success="handlePictureSuccess">
                    <img v-if="application.image" :src="application.image" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </div>
            </div>
            <div class="flex-1" v-if="moduleTypes === 'RotationShow'">
              <div class="mt-2">
                <div class="mt-1">
                  <div class="title-box">展示样式</div>
                  <div class="mt-2 ml-6">
                    <el-radio-group v-model="application.image_list_show">
                      <el-radio class="mb-2" :label="0">默认样式</el-radio>
                      <el-radio class="mb-2" :label="1">卡片式轮播</el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <div class="mt-1 row-ac">
                  <div class="title-box">轮播图高度</div>
                  <div>
                    <el-input-number v-model="application.rotation_height" :precision="0" :min="0"
                      :step="1"></el-input-number>
                  </div>
                </div>
                <div class="mt-1 flex-1">
                  <el-upload :action="actionUrl" list-type="picture-card" :on-remove="handleRotationRemove"
                    :on-success="handleRotationSuccess" :file-list="application.image_list">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
              </div>
            </div>
            <div class="flex-1" v-if="moduleTypes === 'GoodsShow'">
              <div class="mt-2">
                <div class="title-box">展示商品</div>
                <div class="mt-2 ml-6">
                  <el-radio-group v-model="application.product_type">
                    <el-radio class="mb-2" :label="0">推荐产品</el-radio>
                    <el-radio class="mb-2" :label="1">新品</el-radio>
                    <el-radio class="mb-2" :label="2">热销榜</el-radio>
                    <el-radio class="mb-2" :label="3">猜您喜欢</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="mt-2">
                <div class="title-box">展示样式</div>
                <div class="mt-2 ml-6">
                  <el-radio-group v-model="application.product_show">
                    <el-radio class="mb-2" :label="0">默认样式</el-radio>
                    <el-radio class="mb-2" :label="1">划动</el-radio>
                    <el-radio class="mb-2" :label="2">纵列</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <div class="flex-1" v-if="moduleTypes === 'NavigationShow'">
              <div class="mt-2">
                <div class="title-box">展示样式</div>
                <div class="mt-2 ml-6">
                  <el-radio-group v-model="application.navigation_show">
                    <el-radio class="mb-2" :label="0">默认样式</el-radio>>
                  </el-radio-group>
                </div>
                <div class="mt-2 flex-1">
                  <div class="title-box mb-2">导航列表</div>
                  <div class="flex-1 navigation-item py-1 row-ac" v-for="(item, index) in navigationList"
                    :key="item.id" @click="EditDialog(item.id)">
                    <div class="navigation-img ml-2">
                      <img class="img" :src="item.image" />
                    </div>
                    <div class="ml-2 flex-1">
                      <div class="font-s-2">{{ item.title }}</div>
                      <div class="font-s-1 text-light-grey mt-1">路由: {{ item.url }}</div>
                    </div>
                    <div class="delete-box row" @click.stop="openDelete(item.id)">
                      <div class="iconfont icon-shanchu mr-1"></div>
                    </div>
                  </div>
                  <div class="flex-1 navigation-item py-1 row" @click.stop="addNavigationDialog">
                    <div class="iconfont icon-jiahao"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-3 mb-2 flex-1 row" v-if="moduleTypes !== ''">
              <el-button size="small" type="warning" @click="updateApplication">保存设置</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogNavigation" width="30%" title="添加/编辑导航">
      <el-form :model="formNavigation" ref="form" label-width="80px">
        <el-form-item label="导航名称" prop="title">
          <div style="width: 50%;">
            <el-input v-model="formNavigation.title"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <div style="width: 18%;">
            <el-input v-model="formNavigation.sort"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="跳转路由" prop="url">
          <div style="width: 80%;">
            <el-input v-model="formNavigation.url"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="封面图" prop="image">
          <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleNavigationSuccess">
            <img v-if="formNavigation.image" :src="formNavigation.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clickCancel">取 消</el-button>
        <el-button type="primary" v-if="dialogNavigationSubmit" @click="submitNavigationForm">确 定</el-button>
        <el-button type="primary" v-if="dialogNavigationEdit" @click="handleNavigationEdit">保 存</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {
    imagesUploadUrl
  } from "@/utils/interface"
  import {
    moduleListUrl,
    moduleDetailUrl,
    moduleCreateUrl,
    moduleUpdateUrl,
    moduleDeleteUrl,
    applicationCreateUrl,
    applicationDetailUrl,
    applicationUpdateUrl,
    navigationUrl,
  } from "@/utils/clientistration"
  import bcHead from "@/components/renovation/bc-head"
  import bcGoods from "@/components/renovation/bc-goods"
  import bcNavigation from "@/components/renovation/bc-navigation"
  import bcNews from "@/components/renovation/bc-news"
  import bcPicture from "@/components/renovation/bc-picture"
  import bcRotation from "@/components/renovation/bc-rotation"
  import {
    del
  } from '@/utils/request';
  import {
    baseURL
  } from '@/utils/request'
  export default {
    components: {
      bcHead,
      bcGoods,
      bcNavigation,
      bcNews,
      bcPicture,
      bcRotation
    },
    data() {
      return {
        moduleForm: {
          types: '',
          sort: '',
        },
        moduleList: [],
        moduleTypes: '',
        application: {
          module: '',
          head_show: 0,
          image: '',
          image_show: 0,
          picture_height: 200,
          image_list: [],
          image_list_show: 0,
          rotation_height: 238,
          product_type: 0,
          product_show: 0,
          news_type: 0,
          news_show: 0,
        },
        imageList: [],
        formNavigation: {
          title: '',
          sort: '',
          url: '',
          image: ''
        },
        navigationList:[],
        applicationId: '',
        putNavigationId: '',
        dialogNavigation: false,
        dialogNavigationEdit: false,
        dialogNavigationSubmit: false,
        actionUrl: baseURL + imagesUploadUrl,
      }
    },
    filters: {
      typesFilter(types) {
        if (types === 'HeadTerm') {
          return '头部组件'
        } else if (types === 'RotationShow') {
          return '轮播图组件'
        } else if (types === 'NavigationShow') {
          return '导航组件'
        } else if (types === 'PictureShow') {
          return '图片组件'
        } else if (types === 'GoodsShow') {
          return '商品组件'
        } else if (types === 'NewsShow') {
          return '文章组件'
        }
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.getModuleList()
        this.getNavigationList()
      },
      addModule(type) {
        this.$post(moduleCreateUrl, {
          types: type
        }).then(res => {
          if (res.data.code == 200) {
            this.getModuleList()
          }
        })
      },
      getModuleList() {
        this.$get(moduleListUrl).then(res => {
          this.moduleList = res.data.data.list
        })
      },
      tapApplication(item) {
        this.moduleTypes = item.types
        this.application.module = item.id
        if (item.cationDetail.length == 0) {
          this.$post(applicationCreateUrl, this.application).then(res => {
            if (res.data.code == 200) {
              this.getModuleList()
              this.applicationId = res.data.data.id
              this.getApplicationDetail(this.applicationId)
            }
          })
        } else {
          this.applicationId = item.cationDetail[0].id
          this.getApplicationDetail(this.applicationId)
        }
      },
      getApplicationDetail(applicationId) {
        this.$get(applicationDetailUrl + this.applicationId + '/').then(res => {
          this.application = {
            module: res.data.data.module,
            head_show: res.data.data.head_show,
            image: res.data.data.image,
            image_show: res.data.data.image_show,
            picture_height: res.data.data.picture_height,
            image_list: res.data.data.image_list,
            image_list_show: res.data.data.image_list_show,
            rotation_height: res.data.data.rotation_height,
            product_type: res.data.data.product_type,
            product_show: res.data.data.product_show,
            news_type: res.data.data.news_type,
            news_show: res.data.data.news_show
          }
          this.imageList = res.data.data.image_list
        })
      },
      toDelete(moduleId) {
        this.$confirm('此操作将永久删除该模块, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(moduleDeleteUrl + moduleId + '/')
            .then(res => {
              if (res.data.code == 200) {
                this.getModuleList()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }
            })
            .catch(error => {
              console.log(error);
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      getNavigationList(){
        this.$get(navigationUrl).then(res=>{
          this.navigationList = res.data.data.list
        })
      },
      EditDialog(navigationId) {
        this.dialogNavigation = true
        this.dialogNavigationSubmit = false
        this.dialogNavigationEdit = true
        this.$get(navigationUrl + navigationId + '/').then(res => {
          this.putNavigationId = res.data.data.id
          this.formNavigation = {
            title: res.data.data.title,
            sort: res.data.data.sort,
            url: res.data.data.url,
            image: res.data.data.image
          }
          console.log('取得ID', this.putNavigationId);
          this.getNavigationList()
        })
      },
      addNavigationDialog() {
        this.dialogNavigation = true
        this.dialogNavigationSubmit = true
        this.dialogNavigationEdit = false
      },
      openDelete(navigationId) {
        this.$confirm('此操作将永久删除该导航, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 在确定时执行handleDelete的删除
          this.handleDelete(navigationId);
          this.getNavigationList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleDelete(navigationId) {
        this.$del(navigationUrl + navigationId + '/').then(res => {
          this.getNavigationList()
        })
      },
      submitNavigationForm() {
        this.$post(navigationUrl, this.formNavigation).then(res => {
          if (res.data.code == 200) {
            this.dialogNavigation = false
            this.$message({
              showClose: true,
              message: '添加成功',
              type: 'success'
            });
            this.getNavigationList()
            this.getApplicationList()
            this.formNavigation = {}
          }
        })
      },
      clickCancel() {
        this.dialogNavigation = false
      },
      handleRotationSuccess(response) {
        this.imageList.push({
          url: response.data.url
        })
        this.application.image_list = this.imageList
        console.log(this.application.image_list);
      },
      handleRotationRemove(file, fileList) {
        const index = this.application.image_list.findIndex((item) => item.url === file.url);
        if (index !== -1) {
          this.application.image_list.splice(index, 1);
        } else if (this.application.image_list.length > 0) {
          this.application.image_list.pop();
        }
      },
      handlePictureSuccess(response){
        this.application.image = response.data.url
      },
      handleNavigationEdit() {

      },
      handleNavigationSuccess(res) {
        this.formNavigation.image = res.data.url
      },
      updateApplication() {
        // 发送PUT请求
        let formData = new FormData()
        formData.append('module', this.application.module)
        formData.append('head_show', this.application.head_show)
        formData.append('image', this.application.image)
        formData.append('image_show', this.application.image_show)
        formData.append('picture_height', this.application.picture_height)
        formData.append('image_list', JSON.stringify(this.application.image_list))
        formData.append('image_list_show', this.application.image_list_show)
        formData.append('rotation_height', this.application.rotation_height)
        formData.append(' product_type', this.application.product_type)
        formData.append('product_show', this.application.product_show)
        formData.append('news_type', this.application.news_type)
        formData.append('news_show', this.application.news_show)
        formData.append('navigation_show', this.application.navigation_show)
        this.$put(applicationUpdateUrl + this.applicationId + '/', formData).then(res => {
          if (res.data.code == 200) {
            this.getModuleList()
            this.$message({
              showClose: true,
              message: '保存成功',
              type: 'success'
            });
            this.$emit('refresh', '新的数据');
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .layout-left {
    width: 160px;
    height: 100%;
    background-color: #F3F3F3;

    .module-left {
      width: 80px;
      height: 90px;

      .iconfont {
        font-size: 26px;
      }
    }

    .module-left:hover {
      color: #E59B00;
    }
  }

  .layout-middle {
    height: 100%;
    background-color: #E5E5E5;
    position: relative;

    .mobile-template {
      width: 325px;
      height: 90%;
      border-radius: 28px 28px 13px 13px;
      background-color: #f5f5f5;
      overflow-y: scroll;
    }

    .assembly-box {
      width: 120px;
      height: 500px;
      position: absolute;
      top: 43px;
      right: 0;

      .assembly-item {
        width: 120px;
        height: 42px;
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 6px 0 0 6px;
      }
    }
  }

  .layout-right {
    width: 400px;
    height: 100%;
    background-color: #F3F3F3;
    overflow-y: scroll;

    .iconfont {
      color: #BFBFBF;
    }

    .title-box {
      width: 90px;
      font-size: 14px;
      color: #9C9C9C;
    }

    .navigation-item {
      height: 60px;
      border: 1px dashed #E4E4E4;
      border-radius: 10px;
      margin-bottom: 10px;

      .navigation-img {
        width: 60px;
        height: 60px;
        border-radius: 2.5rem;

        .img {
          width: 60px;
          height: 60px;
          border-radius: 2.5rem;
        }
      }

      .delete-box {
        .icon-shanchu {
          font-size: 22px;
        }
      }

      .icon-jiahao {
        font-size: 22px;
        color: #A3A3A3;
      }
    }
  }


  .el-upload-list--picture .el-upload-list__item-thumbnail {
    width: 100% !important;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 100%;
    height: 100px;
  }
  .el-upload--picture-card{
    width: 100%;
    height: 100px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
  }

  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }
</style>
